<template>
  <footer class="footer">
    <div class="max-container">
      <ul class="links">
        <li v-for="(item, index) in links" :key="index">
          <a :href="item.link">{{ $t(item.name) }}</a>
        </li>
      </ul>
      <div class="copy-right">
        <span>{{ $t("Copyright") }}</span>
        <a class="ali-report" href="https://beian.miit.gov.cn/" target="_blank">
          <span class="ali-report-link-text ali-report-link-text-unique"
            >赣ICP备2024042637号-1</span
          >
        </a>
      </div>
    </div>
  </footer>
</template>

<script setup>
const links = [
  {
    name: "AboutUs",
    link: "/about",
  },
  {
    name: "ContactUs",
    link: "/contact",
  },
  {
    name: "Message",
    link: "/message-board",
  },
  // {
  //   name: "Suggestions",
  //   link: "/suggestions",
  // },
  {
    name: "Products",
    link: "/",
  },
];
</script>

<style lang="less">
.footer {
  background: #ffffff;
  box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.1);
  text-align: center;

  .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 5px;

    li:last-child a::after {
      position: absolute;
      right: 0;
      top: 4px;
      bottom: 4px;
      // prettier-ignore
      width: 1PX;
      background-color: #e5e5e5;
      content: "";
    }
    a {
      display: block;
      text-align: center;
      text-decoration: none;
      color: #1a1a1a;
      font-size: 8px;
      padding: 4px 20px;
      height: 100%;
      position: relative;
      margin: 5px;
      &::before {
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        // prettier-ignore
        width: 1PX;
        background-color: #e5e5e5;
        content: "";
      }
    }
  }

  .copy-right {
    font-size: 6px;
    color: #999999;
    padding: 5px;
    display: block;
    text-decoration: none;

    .ali-report {
      margin-left: 10px;
      color: #999999;
      text-decoration: none;
    }
  }
}
</style>
